import React from 'react';
import classNames from 'classnames';
import { Row, Col, Button } from 'antd';
import Link from 'next/link';
import styles from './IndexProduct.less';

export interface IndexProductProps {
  mode: 1 | 2;
  title: string;
  intro: string;
  linkUrl: string;
  featureList: string[];
  productImage: string;
}

const IndexProduct: React.FC<IndexProductProps> = ({
  mode,
  title,
  intro,
  linkUrl,
  featureList,
  productImage,
}) => {
  return (
    <div className={styles.container}>
      <Row gutter={20} className={styles.content}>
        <Col span={24} xl={11} order={mode === 1 ? 1 : 3}>
          <div className={styles.mainInfo}>
            <div className={styles.flag} />
            <div className={styles.title}>{title}</div>
            <div className={styles.intro}>{intro}</div>
            <div className={styles.featureList}>
              {featureList.map((item, index) => (
                <div className={styles.featureItem} key={index}>
                  {item}
                </div>
              ))}
            </div>
            <Link href={linkUrl}>
              <Button type="primary" size="large">
                查看产品详情
              </Button>
            </Link>
          </div>
        </Col>
        <Col span={24} xl={13} order={2}>
          <div className={classNames(styles.circleBg, { [styles.leftMode]: mode === 2 })} />
          <img className={styles.productImage} src={productImage} alt="" />
        </Col>
      </Row>
    </div>
  );
};

export default IndexProduct;
